<template>
  <div>
    <InfoUpperSlash ></InfoUpperSlash>
    <asideRouteStudent current-page="3-1" v-show="defineStu()"></asideRouteStudent>
    <asideRouteTeacher current-page="3-1" v-show="defineTea()"></asideRouteTeacher>
      <!--<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" id="inp">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio label="男" value="男" name="sex" v-model="ruleForm.sex"></el-radio>
          <el-radio label="女" value="女" name="sex" v-model="ruleForm.sex"></el-radio>
        </el-form-item>
        <el-form-item label="身份">
          <el-radio label="学生" value="学生" name="type" v-model="ruleForm.type"></el-radio>
          <el-radio label="教师" value="教师" name="type" v-model="ruleForm.type"></el-radio>
        </el-form-item>
        <el-form-item label="邮箱地址" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone" >
          <el-input v-model.number="ruleForm.phone" maxlength="11" show-word-limit ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>-->
    <div id="table">
    <el-descriptions  title="我的信息" direction="vertical" :column="3"  border >
      <el-descriptions-item label="用户名">{{ dataForm.name }}</el-descriptions-item>
      <el-descriptions-item label="身份">{{ dataForm.identity }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ dataForm.sex}}</el-descriptions-item>
      <el-descriptions-item label="院系信息">{{dataForm.period}}</el-descriptions-item>
      <el-descriptions-item label="班级序号" :span="2">{{dataForm.classid}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{dataForm.phone}}</el-descriptions-item>
      <el-descriptions-item label="邮箱" :span="2">{{dataForm.email}}</el-descriptions-item>
    </el-descriptions>
      <br><br>
      <el-dialog title="信息修改" :visible.sync="dialogFormVisible" width="500px">
        <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="form.sex" placeholder="请选择你的性别">
              <el-option label="男" value="男" name="sex"></el-option>
              <el-option label="女" value="女" name="sex"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话" prop="phone" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off" maxlength="11" show-word-limit></el-input>
        </el-form-item>
          <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
            <el-input type="password" v-model="form.password" autocomplete="off" show-password></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="upload('form')" >确 定</el-button>
        </div>
      </el-dialog>

      <el-button icon="el-icon-edit" @click="dialogFormVisible = true">修改</el-button>
    </div>

    </div>
</template>

<script>
import InfoUpperSlash from "../components/InfoUpperSlash";
import request from "../../utils/request";
import asideRouteStudent from "../components/asideRouteStudent";
import asideRouteTeacher from "../components/asideRouteTeacher";

export default {
  data() {
    let set=JSON.parse(sessionStorage.getItem("user"))
    // noinspection JSAnnotator

    return {
      dataForm: set,
      dialogFormVisible: false,
      form: {
        id:set.id,
        name: set.name,
        phone:set.phone,
        sex:set.sex,
        password:set.password,
        email:set.email,
        identity:set.identity,
        period:set.period,
        classid:set.classid,
      },
      formLabelWidth: '60px',
      rules: {
        password: [
            { type: 'string',message: '请输入不包含非法字符的密码！', trigger: 'blur',
             transform(value) {
               if (value && value.indexOf(' ') === -1&& value.indexOf('*') === -1&& value.indexOf('/') === -1&& value.indexOf('$') === -1&& value.indexOf('￥') === -1&& value.indexOf('%') === -1&& value.indexOf('\'') === -1) {
                 return value
               } else {
                 return false
               }
             }
           },


          {
            validator: (rule, value, callback) => {
              if (value.length > 18 || value.length < 6) {
                callback(new Error('长度必须为6~18个字符'))
              } else {
                var reg = new RegExp("[`~!@#$^&*()=|{}':',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
                if (reg.test(value)) {
                  callback(new Error('请输入不包含非法字符的密码'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],

        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              var reg = new RegExp("[`~!@#$^&*()=|{}':',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
              if (reg.test(value)) {
                callback(new Error('不能含有特殊字符'))
              } else {
                callback()
              }

            },
            trigger: 'blur'
          },
        ],
        email:[
          {required:true,message:'请填写邮箱',trigger:'blur'},
          {
            validator: function(rule, value, callback) {
              if (/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value) === false) {
                callback(new Error("请输入正确邮箱地址！"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        phone: [
          {required:true,message:'请输入手机号',trigger:'blur'},
          { validator:function(rule,value,callback){
              if(/^1[34578]\d{9}$/.test(value) === false){
                callback(new Error("请输入正确的手机号"));
              }else{
                callback();
              }
            }, trigger: 'blur'
          },
        ],
      }
    };

  },
  components:{
    InfoUpperSlash,
    asideRouteStudent,
    asideRouteTeacher,
  },
  methods:{
    defineStu(){
      return this.form.identity==="学生";
    },
    defineTea(){
      return this.form.identity==="教师";
    },
    upload(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
      request.post("api/user/upload",this.form).then(res=>{
        console.log(res.msg)
        this.$message({
          message: '修改成功',
          type: 'success'
        });
      })

      let str=JSON.stringify(this.form)
      sessionStorage.setItem("user",str)

      location.reload()
      this.dialogFormVisible = false

    }
  })
    },
  }
}
</script>
<style scoped>
#table{
  position:absolute;
  right: 23%;
  width: 50%;
  top: 170px;
  column-rule-color: goldenrod;

}
.el-dialog{
  text-align: center;
}
/*.el-menu-vertical-demo{
  width: 203px;
  left: -10px;
  text-align: center;
}*/
</style>
